<template>
  <div class="vheader">
    <!-- <el-row>
      <el-col type="flex" :span="2" class="left hidden-xs-only">
      </el-col>
      <el-col type="flex" :span="8" class="left hidden-xs-only">
        <div id='img'>
          <img src="../assets/images/header/logo2.png"/>
        </div>
        
      </el-col>
      <el-col type="flex" :span="4" class="left hidden-xs-only">
      </el-col>
      <el-col type="flex" :span="10" class="right" :xs='{span: 24}'>
          <img class="y-middle hidden-xs-only" src="@/assets/images/header/touxiang.png" alt />
          <p id="tit">您好,{{this.$store.state.username}}！</p>
          <div>
            <button class="but1" @click="xiugai" style="margin-left:0.4rem">修改密码</button>
           
            <button class="but2" @click="outlogin" style="font-size:5px;">退出登录</button>
          </div>
      </el-col>
    </el-row>-->
    <!-- <el-row type="flex" justify="center">
      <el-col :span="3" class="left"  :xs='{span: 6}'>
        <img src="../assets/images/header/logo2.png"/>
      </el-col>
      <el-col type="flex" :span="19" class="right" :xs='{span: 16}'>
          <p id="tit">您好,{{this.$store.state.username}}！</p>
          <div>
            <button class="but1" @click="xiugai" style="margin-left:0.4rem">修改密码</button>
           
            <button class="but2" @click="outlogin" style="font-size:5px;">退出登录</button>
          </div>
      </el-col>
    </el-row>-->
    <el-row type="flex" justify="center">
      <el-col :span="15" class="left" type="flex" justify="center" :xs="{span: 15}">
        <img src="../assets/images/header/logo2.png" />
        <span v-if="type=='t'" class="text" id="tit" >
          <span class="inner-text">您好,{{this.$store.state.address}}的{{this.$store.state.username}}！身份证号：{{this.$store.state.idCard}}</span>
        </span>
        <span v-else class="text" id="tit" >
          <span class="inner-text">您好,{{this.$store.state.username}}！</span>
        </span>
      </el-col>
      <el-col :span="7" class="right" :xs="{sapn:7}">
        <div>
          <button class="but1" @click="xiugai" style="margin-left:0.4rem">修改密码</button>

          <button class="but2" @click="outlogin">退出登录</button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "vheader",
  props: {
    type: String
  },
  data() {
    return {};
  },
  created(){
    console.log(this.$store);
  },
  methods: {
    outlogin() {
      if (localStorage.getItem("FL_login") == 1) {
        this.$router.push({ name: "Index" ,query:{person:'teacher'}});
      } else {
        this.$router.push({ name: "StudentLogin",query:{person:'student'}});
      }
      localStorage.setItem("FL_TOKEN", " ");
    },
    xiugai() {
      if (localStorage.getItem("FL_login") == 1) {
        this.$router.push({ name: "Tcpassword" });
      } else {
        this.$router.push({ name: "Stpassword" });
      }
    },
  },
};
</script>

<style scoped lang="less">
@keyframes scorlltext {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(-300%);
  }
}
.vheader {
  // height: 0.8rem;
  background: rgba(34, 49, 115, 1);
}
.left {
  display: flex;
  align-items: center;
  position: relative;
}
.text {
  display: block !important;
  width: 100%;
  overflow: hidden;
}
.text .inner-text {
  display: block !important;
  height: 0.36rem;
  white-space: nowrap;
}
@media screen and (max-width: 500px) {
  .text {
    width: 50%;
  }
  .text .inner-text {
    animation: scorlltext 10s linear infinite;
  }
}
.left img {
  width: 1.7rem;
  height: 0.36rem;
  display: flex;
}
.left > span {
  font-size: 0.26rem;
  line-height: 0.7rem;
  height: 0.7rem;
  color: rgba(255, 255, 255, 1);
  display: flex;
  margin-left: 0.2rem;
}
button {
  font-size: 0.18rem;
  color: #ffffff;
  height: 0.5rem;
  width: 1.2rem;
  border: 1px solid #ffffff;
  border-radius: 0.1rem;
  background: rgb(34, 49, 115);
  padding: 0.06rem;
  margin: 0.12rem;
}
.but1 {
  position: absolute;
  right: 1.6rem;
}
.but2 {
  position: absolute;
  right: 0.2rem;
}
// .vheader {
//   height: 0.8rem;
//   background: rgba(34, 49, 115, 1);
//   position: relative;
//   .left img{
//     width: 1.7rem;
//     height: 0.36rem;
//     position: relative;
//     left: 0%;
//     top: 25%;
//   }
//   .right {
//     display: flex;
//     align-content: center;
//     img {
//       width: 35px;
//       height: 36px;
//     }
//     p {
//       // margin-left: 20px;
//       font-size: 14px;
//       line-height: 0.7rem;
//       color: rgba(255, 255, 255, 1);
//     }
//     span {
//       font-size: 14px;
//       line-height: 0.7rem;
//       color: rgba(255, 255, 255, 1);
//       cursor: pointer;
//     }
//     button {
//       font-size:5px;
//       color: #ffffff;
//       height:0.5rem;
//       width: 1.2rem;;
//       border: #ffffff 1px solid;
//       border-radius: 10%;
//       background: rgb(34, 49, 115);
//       padding:0.06rem;
//       margin: 0.12rem;
//     }
//     .but1{

//       position: absolute;
//       right: 1.6rem;
//     }
//     .but2{

//       position: absolute;
//       right: 0.2rem;
//     }
//   }
// }


</style>
